<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .id {
        width: 20px;
    }
    
    input {
        text-align: center;
        font-size: 15px;
    }
</style>

<body>
    <div id="app">
        <input type="text" v-model="keyword" placeholder="直接输入关键字查询">
        <button class="h" @click="add" style="margin-left: 450px; margin-bottom: 10px;">新增</button>
        <!-- 数据table -->
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    <input class="id" type="text" value="Id">
                </td>
                <td>
                    <input type="text" value="标题">
                </td>
                <td>
                    <input type="text" value="概要">
                </td>
                <td>
                    <input type="text" value="内容">
                </td>
                <td>
                    <button style="width: 100%;">操作</button>
                </td>
            </tr>
            <tr v-for="(item,index) in list">
                <td>
                    <input class="id" type="text" v-model="item.id" disabled>
                </td>
                <td>
                    <input type="text" v-model="item.tite" :disabled="disabledarr[index]">
                </td>
                <td>
                    <input type="text" v-model="item.imports" :disabled="disabledarr[index]">
                </td>
                <td>
                    <input type="text" v-model="item.text" :disabled="disabledarr[index]">
                </td>
                <td>
                    <button @click="endit(index,item.id)" v-show="disabledarr[index]">编辑</button>
                    <button @click="del(item.id)" v-show="disabledarr[index]">删除</button>
                    <button @click="save(index)" v-show="!disabledarr[index]">保存</button>
                    <button @click="cancel" v-show="!disabledarr[index]">取消</button>
                </td>
            </tr>
        </table>
        <!-- 新增table -->
        <table v-show="add_table">
            <tr>
                <td>
                    <input type="text" v-model="addobj.tite" placeholder="输入标题">
                </td>
                <td>
                    <input type="text" v-model="addobj.imports" placeholder="输入概要">
                </td>
                <td>
                    <input type="text" v-model="addobj.text" placeholder="输入内容">
                </td>
                <td>
                    <button @click="save()">保存</button>
                    <button @click="cancel()">取消</button>
                </td>
            </tr>
        </table>
    </div>
    <script src="./vue.js"></script>
    <script src="./jquery-3.6.0.min.js"></script>
    <script>
        let baseUrl = 'http://localhost:8000/blog'
        let app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!',
                list: [],
                keyword: '',
                disabledarr: [],
                add_table: false,
                addobj: {}
            },
            watch: {
                keyword() {
                    this.ajax_home('get', {
                        "obj": this.keyword
                    })
                }
            },
            methods: {
                ajax_home(method, obj) {
                    $.ajax({
                        url: baseUrl,
                        method: method,
                        data: obj,
                        success: (res) => {
                            this.list = res
                            this.disabledarr = []
                            for (let i = 0; i < this.list.length; i++) {;
                                this.disabledarr.push(true)
                            }
                            console.log(this.disabledarr);
                        }
                    });
                },
                add() {
                    this.add_table = true
                },
                cancel() {
                    this.add_table = false
                    this.ajax_home('get', {
                        "obj": ''
                    })
                },
                save(index) {
                    if (index == 0 || index) {
                        this.ajax_home('put', (this.list)[index])
                    } else {
                        this.ajax_home('post', this.addobj)
                        this.addobj = {}
                        this.add_table = false
                    }
                },
                endit(index, id) {
                    this.disabledarr = this.disabledarr.join(',').replaceAll(true, false).split(',')
                    this.disabledarr.splice(index, 1, false)
                },
                del(id) {
                    this.ajax_home('delete', {
                        "obj": id
                    })
                }
            },
            created: function() {
                this.ajax_home('get', {
                    "obj": ''
                })
            }
        })
    </script>
</body>

</html>